<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="Resource/javascript/sparrow.js"></script>
<style type="text/css">
div.banner {
	margin: 0;
	font-size: 80% /*smaller*/;
	font-weight: bold;
	line-height: 1.1;
	text-align: center;
	position: fixed;
	top: 0px;
	left: auto;
	width: 100%;
	height: 30px;
	background: #ccc;
	border: #ccc 1px solid;
}

.menu {
	position: fixed;
	border: #ccc 1px solid;
	_position: absolute;
	float: left;
}

.absolute {
	position: fixed;
	_position: absolute;
	width: 300px;
	height: 100px;
	border: #ccc 1px solid;
	margin: auto;
	bottom: 0px;
	right: 0px;
}

.list {
	border: #ccc 1px solid;
	width: 800px;
	height: auto;
	overflow: hidden;
	float: right;
}

.list .item {
	border: #ccc 1px solid;
	margin: 5px;
	width: 800px;
	height: auto;
	overflow: auto;
}

.list .item .content {
	float: left;
	border: red 1px solid;
	width: 300px;
	height: auto;
	overflow: auto;
}

.list .item .operation {
	border: red 1px solid;
	float: right;
	width: 100px;
	height: auto;
	overflow: auto;
}
</style>
<script type="text/javascript">
	/********************
	 * 取窗口滚动条高度 
	 ******************/
	function getScrollTop() {
		return document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop
				: document.body.scrollTop;
	}
	/********************
	 * 取窗口可视范围的高度 
	 *******************/
	function getClientHeight() {
		return (document.body.clientHeight && document.documentElement.clientHeight) ? Math
				.min(document.body.clientHeight,
						document.documentElement.clientHeight)
				: Math.max(document.body.clientHeight,
						document.documentElement.clientHeight);
	}

	/********************
	 * 取文档内容实际高度 
	 *******************/
	function getScrollHeight() {
		return Math.max(document.body.scrollHeight,
				document.documentElement.scrollHeight);
	}

	function more() {
		if (getScrollTop() + getClientHeight() == getScrollHeight()) {
			document.title = getScrollTop() + getClientHeight() + "|"
					+ getScrollHeight();
		} else {
			document.title = getScrollTop() + getClientHeight() + "|"
					+ getScrollHeight();
		}
	}

	var currentScrollItem = null;
	var currentScrollItemContainerTop = null;
	var currentScrollItemContainerBottom = null;
	window.onscroll = function() {
		more();
		//document.title=currentScrollItemContainerTop+":"+currentScrollItemContainerBottom;		
		var itemArray = document.getElementById("divList")
				.getElementsByTagName("div");
		//已经存在当前滚动菜单
		if (currentScrollItem != null) {
			var scrollTop = getScrollTop();
			//currentScrollItemContainerTop = position
			//		.getAbsoluteTopPosByCtrl(currentScrollItem);
			//currentScrollItemContainerBottom = position
			//		.getAbsoluteTopPosByCtrl(currentScrollItem.parentNode)
			//		+ currentScrollItem.parentNode.offsetHeight
			//		- currentScrollItem.offsetHeight;
			document.title = currentScrollItemContainerBottom + "|"
					+ currentScrollItemContainerTop
			//如果当前滚动菜单在当前帖的范围内
			if (scrollTop > currentScrollItemContainerTop
					&& scrollTop < currentScrollItemContainerBottom) {
				document.title = "in" + getScrollTop() + "|"
						+ currentScrollItemContainerTop + "|"
						+ currentScrollItemContainerBottom;
				currentScrollItem.style.top = (getScrollTop() + 30) + "px";
			} else {
				document.title = "out" + getScrollTop() + "|"
						+ currentScrollItemContainerTop + "|"
						+ currentScrollItemContainerBottom;
				currentScrollItem.style.top = (getScrollTop() + 30) + "px";

				//如果不在范围内清除
				if (currentScrollItem != null) {
					currentScrollItem.style.position = "static";
					currentScrollItem = null;
				}
			}
		} else {
			//如果当前没有滚动则选举
			for ( var i = 0; i < itemArray.length; i++) {
				var item = null;
				if (itemArray[i].className == "operation") {
					item = itemArray[i];

				} else {
					continue;
				}
				var scrollItemContainerTop = position
						.getAbsoluteTopPosByCtrl(item);
				var scrollItemContainerBottom = position
						.getAbsoluteTopPosByCtrl(item.parentNode)
						+ item.parentNode.offsetHeight - item.offsetHeight - 30;
				document.title = "select " + i + "|" + getScrollTop() + "|"
						+ scrollItemContainerTop + "|"
						+ scrollItemContainerBottom;

				//如果满足滚动条件
				if (getScrollTop() > scrollItemContainerTop
						&& getScrollTop() < scrollItemContainerBottom) {
					currentScrollItem = itemArray[i];
					currentScrollItemContainerTop = scrollItemContainerTop;
					currentScrollItemContainerBottom = scrollItemContainerBottom;
					currentScrollItem.style.position = "absolute";
					currentScrollItem.style.top = (getScrollTop() + 30) + "px";
					currentScrollItem.style.left = position
							.getAbsoluteLeftPosByCtrl(currentScrollItem.parentNode)
							+ currentScrollItem.parentNode.offsetWidth
							- currentScrollItem.offsetWidth - 5 + "px";
					break;
				}
			}
		}
	}
</script>

</head>
<body style="text-align: center;">
	<div class="banner">banner</div>
	<div
		style="height: 2000px; border: #ccc 1px solid; width: 1004px; margin: auto; margin-top: 40px;">

		<div class="menu">
			首页 <br /> 首页2 <br />
		</div>

		<div class="list" id="divList">
			<div class="item">

				<div class="content">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
				<div class="operation" id="divoperation1">
					1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br />
					1<br /> 1<br /> 1<br /> 1<br />
				</div>
			</div>
			<div class="item">

				<div class="content">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内</div>
				<div class="operation" id="divoperation2">
					2<br /> 2<br /> 2<br /> 2<br /> 2<br /> 2<br /> 2<br /> 2<br />
					2<br /> 2<br /> 2<br /> 2<br />
				</div>
			</div>
			<div class="item">

				<div class="content">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内</div>
				<div class="operation" id="divoperation3">
					3<br /> 3<br /> 3<br /> 3<br /> 3<br /> 3<br /> 3<br /> 3<br />
					3<br /> 3<br />
				</div>
			</div>
			<div class="item">

				<div class="content">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内</div>
				<div class="operation" id="divoperation4">
					4<br /> 4<br /> 4<br /> 4<br /> 4<br /> 4<br /> 4<br /> 4<br />
					4<br />
				</div>
			</div>
			<div class="item">

				<div class="content">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内</div>
				<div class="operation" id="divoperation5">
					5<br /> 5<br /> 5<br /> 5<br /> 5<br /> 5<br /> 5<br /> 5<br />
					5<br /> 5<br /> 5<br />
				</div>
			</div>

		</div>
	</div>



	<div class="absolute">
		<div style="position: relative; top: 50px; left: 20px;">relative</div>
	</div>
</body>
</html>